<!--  -->
<template>
  <div class="messagenotify">
    <div class="noticeShowM">
      <p>
        友情提示：为避免提醒邮件被您的邮件系统误认为垃圾邮件，建议您把 <span style="color:#f60;">ezweb@china-channel.com</span> 添加到邮箱系统的白名单。
      </p>
      <div class="guideshow"><div class="guideshow-btn" @click="guideShow"><i class="el-icon-question"></i>功能引导</div></div>
    </div>
    <div class="msg-set">
      <el-tabs v-model="activeName">
        <el-tab-pane label="消息通知设置" name="1">
          <MsgNotify />
        </el-tab-pane>
      </el-tabs>
    </div>
    <DialogMessagenotifyGuide ref="messagenotifyGuide" />
  </div>
</template>

<script>
import MsgNotify from '@/pages/backend/user/host/messagenotify/msgnotify/MsgNotify.vue'
import DialogMessagenotifyGuide from '@/pages/backend/guide/DialogMessagenotifyGuide.vue'
import storageGuide from '@/core/storageGuide.js'
import PubSub from 'pubsub-js'
import * as PubsubType from '@/config/pubsubtype.js'
export default {
  data () {
    return {
      activeName: '1'
    }
  },
  mounted () {
    // 新手导引
    let ismessagenotifyGuide = storageGuide.getGuideOptByKey('messagenotify')
    if (!ismessagenotifyGuide) {
      this.$refs['messagenotifyGuide'].show()
      storageGuide.setGuideOpt('messagenotify', true)
    }
  },
  methods: {
    // 新手引导
    guideShow () {
      PubSub.publish(PubsubType.PUBSUB_BACKEND_MAIN_SCROLL_TOTOP, 0)
      this.$refs['messagenotifyGuide'].show()
    }
  },
  components: {
    MsgNotify,
    DialogMessagenotifyGuide
  }
}
</script>

<style scoped lang="scss">
.noticeShowM {
  border-left: 4px solid #409EFF;
  padding: 15px 120px 15px 15px;
  font-size: 13px;
  line-height: 1.7;
  background: #F0F8FF;
  margin-bottom: 20px;
  position: relative;
  .guideshow{
    position:absolute;
    right: 50px;
    top: 6px;
    line-height: 40px;
    .guideshow-btn{
      color: #258FFB;
      cursor: pointer;
      display: inline-block;
      vertical-align: middle;
      i {
        font-size: 16px;
        margin-right: 3px;
        vertical-align: middle;
      }
    }
  }
}
.tit-uu{
  border-bottom: 1px solid #D8D8D8;
  margin-bottom: 15px;
  span{
    display: inline-block;
    padding-bottom: 10px;
    position: relative;
    font-size: 18px;
    &:before{
      content: '';
      position: absolute;
      left: 0;
      bottom: -1px;
      height: 2px;
      width: 100%;
      background: #409EFF;
    }
  }
}
</style>
